如何將 HTML 的 Tokens 轉換成目標 AST 呢？

今天我們來說明一下

第零步，確定輸入 & 輸出

預期輸出 - Tokens

const tokens = [
    {"type": "tagStart", "name": "div"},
    {"type": "tagStart", "name": "p"},
    {"type": "text", "content": "Vue"},
    {"type": "tagEnd", "name": "p"},
    {"type": "tagSelfClose", "name": "input"},
    {"type": "tagStart", "name": "p"},
    {"type": "text", "content": "Template"},
    {"type": "tagEnd", "name": "p"},
    {"type": "tagEnd", "name": "div"},
]

預計輸出 - AST

const AST = {
    type: 'root',
    children: [
        {
            "type": "div",
            "children": [
                {
                    "type": "p",
                    "children": [
                        {
                            "type": "text",
                            "content": "Vue"
                        }
                    ]
                },
                {"type": "input"},
                {
                    "type": "p",
                    "children": [
                        {
                            "type": "text",
                            "content": "Template"
                        }
                    ]
                }
            ]
        }
    ]
}

第一步，藉由 elementStack 來記錄目前的父子關係，建構 AST

依照以下規則來建立 AST

1. 如果是 tagStart，則建立一個新的 node A，node A 當作 elementStack 的最後一個元素的 children，並將 node A push elementStack
2. 如果是 tagEnd，則 pop elementStack 的最後一個元素
3. 如果是 tagSelfClose 或 Text，則建立一個新的 node A，node A 當作 elementStack 的最後一個元素的 children

明天就根據上面的圖實作 Tokens 轉換成 AST 的 Parser 吧 ( •̀ ω •́ )✧

參考資料

• 書籍 - Vue.js 設計與實現 - 第 15.3 章節